<template>
  <section>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true">
        <el-form-item>
          <el-button type="success" icon="plus" style="width: 120px"  @click="add">添加卷包</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="warning" style="width: 120px;margin-left: 20px;"  @click="share">分享卷包</el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <!--列表-->
    <el-table :data="pkgData" style="width: 100%" v-loading="listLoading" element-loading-text="玩命请求中。。。">
      <el-table-column prop="id" label="ID" width="100">
      </el-table-column>
      <el-table-column prop="coupons_ids" label="优惠卷id群" min-width="140">
      </el-table-column>
      <el-table-column prop="once_num" label="每次领取数" width="120">
      </el-table-column>
      <el-table-column prop="pull_cd" label="拉取cd" width="200">
      </el-table-column>
      <el-table-column prop="create_time" label="创建时间" width="200">
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button type="danger" size="small" @click="deletePkg(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--新增卷包-->
    <el-dialog title="新增卷包" v-model="addShow" :close-on-click-modal="false">
      <el-form :model="addForm" label-width="80px" ref="addForm">

        <el-form-item label="抽取次数" prop="bind">
          <template slot-scope="scope">
            <div style="width: 300px;display: inline-block;">
              <el-input v-model="addForm.once_num" auto-complete="on"></el-input>
            </div>
            <span style="margin-left: 10px;">例如：56</span>
          </template>
        </el-form-item>

        <el-form-item label="领取cd" prop="num">
          <template slot-scope="scope">
            <div style="width: 300px;display: inline-block;">
              <el-input v-model="addForm.pull_cd" auto-complete="on"></el-input>
            </div>
            <span style="margin-left: 10px;">例如：30</span>
          </template>
        </el-form-item>

        <el-form-item label="卷id" prop="type">
          <template slot-scope="scope">
            <div style="width: 600px;">
              <el-input type="textarea" v-model="addForm.coupons_ids" :row="4"></el-input>
            </div>
            <div><span>例如：30,25,56,89,75</span></div>
          </template>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="addShow = false">取消</el-button>
        <el-button type="primary" @click.native="addPkg">提交</el-button>
      </div>
    </el-dialog>

    <!--分享卷包-->
    <el-dialog title="分享卷包" v-model="shareShow" :close-on-click-modal="false">
      <el-form :model="shareForm" label-width="80px" ref="shareForm">

        <el-form-item label="分享数量" prop="num">
          <template slot-scope="scope">
            <div style="width: 300px;display: inline-block;">
              <el-input v-model="shareForm.field.num" auto-complete="on"></el-input>
            </div>
            <span style="margin-left: 10px;">例如：30</span>
            <span style="color: red">* 此数字为客户端展示数量</span>
          </template>
        </el-form-item>

        <el-form-item label="卷包id" prop="num">
          <template slot-scope="scope">
            <div style="width: 300px;display: inline-block;">
              <el-input v-model="shareForm.field.pkg_id" auto-complete="on"></el-input>
            </div>
            <span style="margin-left: 10px;">例如：30</span>
          </template>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="shareShow = false">取消</el-button>
        <el-button type="primary" @click.native="setSharePkg">提交</el-button>
      </div>
    </el-dialog>

  </section>
</template>

<script type="text/ecmascript-6">
  import util from '../../util'
	import { apiTree } from '../../apiTree'

  export default {
    name: 'coupons_pkg',
    data() {
      return {
        addShow: false,
        listLoading: false,
        pkgData: [],
        total: 0,
        shareShow: false,
        shareForm: {
          field: {
            num: '0',
            pkg_id: '0'
          }
        },
        addForm: {
          coupons_ids: '',
          once_num: '',
          pull_cd: ''
        }
      }
    },
    methods: {
      add() {
        this.addShow = true;
      },
      // 新增卷包
      addPkg() {
        if (util.isEmpty(this.addForm.coupons_ids)) {
          this.$message.error('输入ids');
          return
        }
        if (util.isEmpty(this.addForm.once_num)) {
          this.$message.error('输入每次领取次数');
          return
        }
        if (util.isEmpty(this.addForm.pull_cd)) {
          this.$message.error('输入领取cd');
          return
        }
        apiTree('coupons/couponsPkg','coupons/addCouponsPkg',this.addForm, 'POST').then((res) => {
          if (res.s === 1) {
            this.$message({
              message: '添加成功',
              type: 'success'
            });
            this.addShow = false;
            this.getcouponsPkg();
          } else {
            this.$message.error(res.err_str);
          }
        })
      },
      share() {
        this.shareShow = true;
      },
      setSharePkg() {
        if (!util.isInt(this.shareForm.field.num)) {
          this.$message.error('分享数量错误！');
          return
        }
        if (!util.isInt(this.shareForm.field.pkg_id)) {
          this.$message.error('卷包id错误！');
          return
        }
        apiTree('coupons/couponsPkg', 'coupons/setSharePkg', {data: this.shareForm},'POST').then((res) => {
          if (res.s === 1) {
            this.$message({
              message: '执行成功',
              type: 'success'
            })
            this.shareShow = false;
          } else {
            this.$message.error(res.err_str);
          }
        });
      },
      // 删除卷包
      deletePkg(_id) {
        let param = {id: _id};
        apiTree('coupons/couponsPkg', 'coupons/deleteCouponsPkg', param).then((res) => {
          if (res.s === 1) {
            this.$message({
              message: '删除成功',
              type: 'success'
            })
            this.getcouponsPkg();
          } else {
            this.$alert(res.err_str)
          }
        });
      },
      // 获得卷包
      getcouponsPkg() {
        this.listLoading = true;
        apiTree('coupons/couponsPkg','coupons/pkgList').then((res) => {
          this.pkgData = res.d.data;
          this.total = res.d.total;
          this.shareForm.field.num = res.d.share_pkg.field.num;
          this.shareForm.field.pkg_id = res.d.share_pkg.field.pkg_id;
          this.listLoading = false;
        });
      }
    },
    created() {
      this.getcouponsPkg();
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">

</style>